<template>
  <div class="header-common">
        <div class="heade">
             <i class="icon-font icon-back" v-if="goBack" @click="back">&#xe697;</i> 
            <div class="switches-wrapper t3">{{title}}</div>
        </div>  
        <div class="division"></div>
  </div>
</template>
<script>
  export default {
    props: {
      title: {
        type: String,
        default: '测试测试'
      },
      goBack:{
        type: Boolean,
        default: true
      }
    },
    methods:{
      back() {
        this.$router.back()
      }      
    }
  }
</script>
<style scoped lang="scss" rel="stylesheet/css">
  @import "~common/scss/variable.scss";
  @import "~common/scss/mixin.scss";
.heade{
     height:45px;
     line-height: 45px;
    text-align:center;
    font-size:$font-size-medium-x;
    .icon-back{
          font-weight: bold;
          position: absolute;
          top: 12px;
          left: 15px;
          font-size:$font-size-large-a;
           @include extend-click;
      }        
    .t3{
        display:flex;
        display:-webkit-flex;
        width:60%;
        margin:0 auto;
        justify-content:center;
        align-items:center;
    }
    .three{
        flex:1;
    }
}
</style>